<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '详情',
                icon: 'clarity:info-standard-line',
                onClick: handleDesc.bind(null, record),
              },
              {
                label: '同意',
                color: 'success',
                icon: 'clarity:success-standard-line',
                onClick: handleAccept.bind(null, record),
              },
              {
                label: '拒绝',
                color: 'error',
                icon: 'ant-design:delete-outlined',
                popConfirm: {
                  title: '确认拒绝？',
                  okText: '确认',
                  cancelText: '取消',
                  confirm: handleReject.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <ApplyDescModal @register="registerDescModal" />
  </div>
</template>
<script lang="ts" setup>
  import { basicColumns } from "./data";
  import ApplyDescModal from "./Desc.vue";
  import { useModal } from "/@/components/Modal";
  import { useMessage } from "/@/hooks/web/useMessage";
  import { defaultActionColumn, defaultTableSettings } from "/@/hooks/core/useDefault";
  import { BasicTable, TableAction, useTable } from "/@/components/Table";
  import { agreeApplicationApi, getApplyListApi, rejectApplicationApi } from "/@/api/core/group";

  const [registerTable, { setLoading }] = useTable({
    title: "申请列表",
    rowKey: "userId",
    api: getApplyListApi,
    columns: basicColumns,
    actionColumn: {
      width: 240,
      ...defaultActionColumn,
    },
    ...defaultTableSettings,
  });

  const [registerDescModal, { openModal: openDescModal }] = useModal();

  const { createMessage } = useMessage();

  function handleDesc(data) {
    openDescModal(true, data);
  }

  async function handleAccept(record) {
    try {
      setLoading(true);
      await agreeApplicationApi(record.userId, record.groupId);
      createMessage.success("已接受申请");
    } finally {
      setLoading(false);
    }
  }

  async function handleReject(record) {
    try {
      setLoading(true);
      await rejectApplicationApi(record.userId, record.groupId);
      createMessage.success("已拒绝申请");
    } finally {
      setLoading(false);
    }
  }
</script>
